{embed=/_incs/docstart}

<title>{tr_sitename} {tr_title_breaker} NCE Form Example</title>

{embed=/_incs/head}

<style>
	.error { color: #F55; }
	.field {
		padding: 4px;
	}
</style>

<body class="community">
{embed=/_incs/bodystart}
{embed=/_incs/header}
{embed=/_incs/mainmenu}

	<div id="content">
		<div class="pagetitle notabs">
			<div class="padder6"></div>
		</div>

		<div class="padder18">


{exp:weblog:entries weblog="genericcontent" limit="1"}

{exp:nce_form:ncform name="example_form" submit_action="email_to_user,csv:example.csv,submit_to_plugin:Dummy_ncform_handler.handle_submission" validation_point="backend"}
	{form}
		<h3>Example form with various field and validation types</h3>
		<div>* Required fields</div>
		{config}
			{setting name="encoding" value="utf-8"}
			{setting name="language" value="{tr_lang}"}
			{setting name="custom_phrasebook_template" value="ncform/custom_phrasebook.xml"} <!-- optional, otherwise it looks for ncform/nce_form_phrasebook.xml -->
			{setting name="email_template" value="ncform/custom_email_template"} <!-- optional, otherwise it uses 'default-email-body' from phrasebook -->
			{setting name="email_subject_key" value="custom-email-subject"} <!-- optional, otherwise it uses 'default-email-subject' from phrasebook -->
			{setting name="email_sender_address" value="noreply@ncsoft.com"}
			{setting name="email_sender_name" value="NCsoft"}
			{setting name="email_server" value="ncbpostal"}<!-- optional, defaults to localhost -->
			{setting name="custom_result_template" value="ncform/custom_result_template"}
		{/config}
			
		<div class="field">
			{field name="firstname" type="textfield" validation="required,letters,maxlength:50"}
				{phrase key="label-firstname"}*: {element maxlength="50" class="form-textfield"}{/element}
				{error validation="required"}
					<span class="error">{phrase key="error-required-general"}</span>
				{/error}
				{error validation="letters"}
					<span class="error">{phrase key="error-required-letters"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="phone" type="textfield" validation="required,number,maxlength:30"}
				{phrase key="label-phone"}*: {element maxlength="30" class="form-textfield"}{/element}
				{error validation="required"}
					<span class="error">{phrase key="error-required-general"}</span>
				{/error}
				{error validation="number"}
					<span class="error">{phrase key="error-required-number"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="multi_choice_1" type="multiple_choice" validation="required"}
				{phrase key="label-multi-choice1"}*:
				<div>{element name="answer_1"}Answer 1{/element}</div>
				<div>{element name="answer_2"}Answer 2{/element}</div>
				<div>{element name="answer_3"}Answer 3{/element}</div>
				{error validation="required"}
					<span class="error">{phrase key="error-required-at-least-one"}</span>
				{/error}
			{/field}
		</div>	
		<div class="field">
			{field name="multi_choice_2" type="multiple_choice"}
				{phrase key="label-multi-choice1"}:
				<div>{element name="answer_4"}Answer 4{/element}</div>
				<div>{element name="answer_5"}Answer 5{/element}</div>
				<div>{element name="answer_6"}Answer 6{/element}</div>
			{/field}
		</div>	
		<div class="field">
			{field name="dropdown_1" type="dropdown" default="choice_2"}
				{phrase key="label-dropdown1"}:
				{element}
					{option value="choice_1"}Choice 1{/option}
					{option value="choice_2"}Choice 2{/option}
					{option value="choice_3"}Choice 3{/option}
				{/element}
			{/field}
		</div>	
		<div class="field">
			{field name="dropdown_2" type="dropdown" default="choice_3"}
				{phrase key="label-dropdown1"}:
				{element}
					{option value="choice_A"}Choice A{/option}
					{option value="choice_B"}Choice B{/option}
					{option value="choice_C"}Choice C{/option}
				{/element}
			{/field}
		</div>	
		<div class="field">
			{field name="dropdown_3" type="dropdown" validation="required" default=" "}
				{phrase key="label-dropdown1"}:
				{element}
					{option value=" "}----------{/option}
					{option value="Male"}Male{/option}
					{option value="Female"}Female{/option}
				{/element}
				{error validation="required"}
					<span class="error">{phrase key="error-required-at-least-one"}</span>
				{/error}
			{/field}
		</div>	
		<div class="field">
			{field name="radio_1" type="radio" validation="required" default="answer_B"}
				{phrase key="label-radio1"}*:
				{element value="answer_A"}Answer A{/element} 
				{element value="answer_B"}Answer C{/element} 
				{element value="answer_C"}Answer B{/element} 
				{error validation="required"}
					<span class="error">{phrase key="error-required-at-least-one"}</span>
				{/error}
			{/field}
		</div>	
		<div class="field">
			{field name="radio_2" type="radio" default="answer_Z"}
				{phrase key="label-radio1"}:
				{element value="answer_X"}Answer X{/element} 
				{element value="answer_Y"}Answer Y{/element} 
				{element value="answer_Z"}Answer Z{/element} 
			{/field}
		</div>	
		<div class="field">
			{field name="more_text" type="textarea" validation="required,maxlength:250"}
				{phrase key="label-some-more-text"}*:<br/>
				<div>
					{element rows="4" cols="30"}{/element}
				</div>				
				<em>Max 250 characters</em>
				{error validation="required"}
					<span class="error">{phrase key="error-required-general"}</span>
				{/error}
				{error validation="maxlength"}
					<span class="error">{phrase key="error-too-many-characters"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="some_more_text" type="textarea" validation="maxlength:250"}
				{phrase key="label-some-more-text"}:
				<div>
					{element rows="3" cols="30"}This is some more default text{/element}
				</div>
				<em>Max 250 characters</em>
				{error validation="maxlength"}
					<span class="error">{phrase key="error-too-many-characters"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="date_of_birth" type="date" validation="age_greater_than:18"}
				{phrase key="label-dob"}*: {element}{days}{/element} / {element}{months}{/element} / {element}{years}{/element}
				{error validation="age_greater_than"}
					<span class="error">{phrase key="error-under-18"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="year_date" type="date"}
				Choose a year: {element}{years}{/element}
			{/field}
		</div>
		<div class="field">
			{field name="photo" type="upload" validation="types:jpg|jpeg,size:1024" process="no"}
				{phrase key="label-photo"}: {element}{phrase key="upload"}{/element}
				{error validation="types"}
					<span class="error">{phrase key="error-invalid-filetype"}</span>
				{/error}
				{error validation="size"}
					<span class="error">{phrase key="error-file-too-big"}</span>
				{/error}
			{/field}
		</div>	
		<div class="field">
			{field name="email" type="textfield" validation="required,email"}
				{phrase key="label-email"}*: {element maxlength="30"}{/element}
				{error validation="required"}
					<span class="error">{phrase key="error-required-general"}</span>
				{/error}
				{error validation="email"}
					<span class="error">{phrase key="error-invalid-email"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="agree_tos" type="checkbox" validation="required" process="no"}
				<div>{element value="1"}{/element} {phrase key="label-agree-tos"}*</div>
				{error validation="required"}
					<span class="error">{phrase key="error-required-terms"}</span>
				{/error}
			{/field}
		</div>	
		<div class="field">
			{field name="captcha" type="textfield" validation="captcha" process="no"}
				{captcha}
				Please enter the text in the image*: {element maxlength="10"}{/element}
				{error validation="required"}
					<span class="error">{phrase key="error-required-general"}</span>
				{/error}
				{error validation="captcha"}
					<span class="error">{phrase key="error-captcha-incorrect"}</span>
				{/error}
			{/field}
		</div>
		<div class="field">
			{field name="submit" type="submit" process="no"}
				{element class="form-submit"}{phrase key="label-submit"}[{tr_lang}]{/element}
			{/field}
		</div>
		<div class="field">
			{field name="image_submit" type="image" process="no"}
				{element src="/images/assets/{tr_lang}/button-submit.png" class="buttonsubmit" alt="submit"}{/element}
			{/field}
		</div>
	{/form}
	
	{result}
		{phrase key="default-submission-thanks"}
	{/result}
	
{/exp:nce_form:ncform}

{/exp:weblog:entries}

			</div>
		</div>
	</div>
	
{embed=/_incs/footer}
{embed=/_incs/bodyend}
{embed=/_incs/docend}

